/*
 * poster
**/
<template>
<div @touchmove.prevent> <!-- 阻止滚动穿透 -->
	<div class="canvas-pic-box" v-show="tempshow" id="promotion-box">
	 	<div class="pic-box">
	 		<img :src="elem.imgOri" alt="" />
	 	</div>
	 	<h4 class="weui-media-box__title name">{{title1}}</h4>
	 	<h4 class="weui-media-box__title name">{{title2}}</h4>
	 	<div  class="weui-media-box weui-media-box_appmsg media-box">
            <div class="weui-media-box__hd">
            	<div class="qrcode-box" v-html="qrHtml"></div>
            	<img src="../../assets/imgs/commision/1.png" class="i-logo" v-if="logoIndex === 1">
            	<img src="../../assets/imgs/commision/2.png" class="i-logo" v-if="logoIndex === 2">
            	<img src="../../assets/imgs/commision/3.png" class="i-logo" v-if="logoIndex === 3">
            	<img src="../../assets/imgs/commision/4.png" class="i-logo" v-if="logoIndex === 4">
            	<img src="../../assets/imgs/commision/5.png" class="i-logo" v-if="logoIndex === 5">
            	<img src="../../assets/imgs/commision/6.png" class="i-logo" v-if="logoIndex === 6">
            	<img src="../../assets/imgs/commision/7.png" class="i-logo" v-if="logoIndex === 7">
            	<img src="../../assets/imgs/commision/8.png" class="i-logo" v-if="logoIndex === 8">
            	<img src="../../assets/imgs/commision/9.png" class="i-logo" v-if="logoIndex === 9">
            	<img src="../../assets/imgs/commision/10.png" class="i-logo" v-if="logoIndex === 10">
            	<img src="../../assets/imgs/commision/11.png" class="i-logo" v-if="logoIndex === 11">
            	<img src="../../assets/imgs/commision/12.png" class="i-logo" v-if="logoIndex === 12">
            	<img src="../../assets/imgs/commision/13.png" class="i-logo" v-if="logoIndex === 13">
            	<img src="../../assets/imgs/commision/14.png" class="i-logo" v-if="logoIndex === 14">
            	<img src="../../assets/imgs/commision/15.png" class="i-logo" v-if="logoIndex === 15">
            	<img src="../../assets/imgs/commision/16.png" class="i-logo" v-if="logoIndex === 16">
            </div>
            <div class="weui-media-box__bd">
            	<div class="w-panel">
	                <h4 class="weui-media-box__title title">券后价</h4>
	                <div class="weui-media-box__desc prize-box">
						<span class="pbox-n">￥<span class="prize">{{elem.price}}</span></span>
					</div>
				</div>
				<div class="btn-group" v-if="elem.couponAmount != 0"><span class="active">优惠券</span><span>{{elem.couponAmount}}</span></div>
                <p class="weui-media-box__desc desc">长按识别二维码查看详情</p>
            </div>
        </div>
    </div>
	
	<div transition="fade" class="modal" v-show="dialogshow">
		<div class="weui-dialog reset-top noradius">
			<img :src="viewImg" class="view-img" id="viewImg"/>
	        <p class="media-tip">长按图片保存海报 或 直接分享给朋友</p>
			<a href="javascript:void(0)" class="dialogCloseBtn" @click="dialogClose"></a>
		</div>
		<div class="modal-maks" style=""></div>
	</div>
	
	<div v-if="inGetData">
	    <div class="weui-mask_transparent"></div>
	    <div class="weui-toast" style="margin-top:3.8em; background:rgba(17, 17, 17, 0.5)">
	        <i class="weui-loading weui-icon_toast"></i>
	        <p class="weui-toast__content">海报生成中</p>
	    </div>
	</div>
</div>
</template>
<script>
import {clickRecord} from 'src/service/getData'
import qrCode from 'qrcode-npm'
export default {
  data () {
    return {
      inGetData: false, // loading
      tempshow: false, // copy模版
      dialogshow: false, // 分享弹窗
      elem: {},
      title1: '', // 切分标题
      title2: '',
      logoIndex: 0, // 当前logo图
      qrHtml: '', // 生成的二维码dom
      viewImg: '' // 海报图
    }
  },
  methods: {
    shareWin (item) {
      this.inGetData = true
      this.elem = item
      let that = this
      // 加载图片
      let img = new Image()
      img.src = item.imgOri
      img.onload = function () {
        that.makePoster()
      }
      // 生成二维码
      var qr = qrCode.qrcode(9, 'H')
      qr.addData(item.url)
      qr.make()
      this.qrHtml = qr.createImgTag(6).replace(':image/gif;', ':image/png;')
      this.makeTitle(item.title)
      this.pointIMG(item.mallName)
    },
    makePoster () {
      let that = this
      // 生成海报
      that.tempshow = true
      window.html2canvas(document.getElementById('promotion-box'), {
        allowTaint: false,
        onrendered: function (canvas) {  // loadingend
          that.tempshow = false
          that.dialogshow = true
          that.inGetData = false
          that.viewImg = canvas.toDataURL('image/png', 1.0)
          that.longclick()
        }
      })
      // that.tempshow = true
    },
    dialogClose () {
      this.dialogshow = false
    },
    makeTitle (title) {
      this.title2 = ''
      this.title1 = title.substring(0, 20)
      if (title.length > 20) {
        this.title2 = title.substring(20, 40) + (title.length > 40 ? '...' : '')
      }
    },
    pointIMG (name) {
      let arr = ['buysweet', '中国零食网', '京东', '哪拍网', '唯品会', '国药网', '女神派', '平安好医生', '微店', '易视眼镜网', '每日优鲜', '百城优品', '百洋健康', '网易严选', '聚优汇', '蘑菇街']
      this.logoIndex = arr.indexOf(name) + 1
    },
    longclick () {
      var oImg = document.getElementById('viewImg')
      let startTime = null
      oImg.addEventListener('touchstart', () => {
        startTime = +new Date()
      }, !1)
      oImg.addEventListener('touchend', () => {
        let endTime = +new Date()
        if (endTime - startTime > 1200) {
          clickRecord('commision', 'saveimg')
        }
      }, !1)
    }
  }
}
</script>
<style scoped>
	.canvas-pic-box{padding: 70px; text-align: left; position: absolute; top: 0; left: 0; z-index: 9999; background: #fff; width: 640px;}
	.pic-box{border: 1px solid #ff6600; height: 500px;overflow: hidden;margin-bottom:10px;} 
	.pic-box img{width:100%;}
	.weui-media-box__title.name{color: #333; font-size: 26px; line-height:26px;word-break:break-all;word-wrap : break-word;padding: 6px 0;}
	.weui-media-box__title.title{font-size: 30px; color: #333;}
	.w-panel{height: 1.32rem;}
	.prize-box{margin: 10px 0 0; position: relative;}
	.pbox-n{color:#ff6f6d;font-size:20px;}
	.pbox-n .prize{font-size:28px;}
	.media-box{padding: 30px 0 0; margin-top: 30px;}
	.media-box .weui-media-box__hd{width: 220px; height: 220px;overflow:hidden;box-shadow: 0 0 6px 0 #ccc;position:relative;border:1px solid #ccc;}
	.btn-group{border-width: 1px; overflow: hidden;display: inline-table;}
	.btn-group span{display: inline-block; width: 90px; line-height: 36px; text-align: center; font-size: 22px; background: #ffa200;}
	.btn-group span.active{background:#fff; color: #333;}
	.desc{font-size:20px;padding-top:14px}
	.noradius{border-radius:0;width: 90%; max-width: 320px; }
	.media-tip{position: absolute; top: 100%; left: 0; text-align: center; font-size:0.14rem; margin-top: 2px; color: #fff; width: 100%;}
	.view-img{width:100%;}
  .i-logo{position: absolute;background-size:100%; width: 60px; height: 60px; top: 82px; left: 82px;}
  html{overflow: hidden}
</style>
<style type="text/css">
	.qrcode-box img{width: 100%;height:100%;}
</style>
